<template>
  <div>
    <div class="m_title">
      <div class="divider"></div>
      <strong>{{title}}</strong>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class MyTitle extends Vue {
  @Prop({ type: String, default: '' }) title!: string
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.m_title {
  align-items: center;
  display: flex;
  margin-bottom: 16px;
  margin-top: 24px;

  strong {
    color: #373b52;
    // font-family: PingFangSC-Medium, PingFang SC;
    font-size: 16px;
  }
}

.divider {
  background-color: #6973ff;
  height: 18px;
  margin-right: 8px;
  width: 4px;
}

</style>
